<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title th:text="${webinfo.webname}"></title>
    <link rel="icon" th:href="'/images/'+${webinfo.webicon}"/>
    <!--bootstrap3 cdn-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--font-awesome-->
    <link rel="stylesheet" href="/style/css/font-awesome.min.css"/>
    <!--layui-->
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/style/css/pushbar.css"/>
    <script src="/script/js/pushbar.js"></script>
    <!--自定义样式css-->
    <link rel="stylesheet" href="/style/theme/default/main.css"/>
    <link rel="stylesheet" href="/style/theme/default/style.css"/>
    <!--js-->
    <script src="/script/js/me.js"></script>
    <style type="text/css">

    </style>
    <script language="javascript">

    </script>
</head>
<body>
<div class="container" style="background-color: #fff;">
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-expand-md">
        <div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"><span
                        class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span></button>
                <a class="navbar-brand" href="javascript:void(0);"> <span> <img th:src="'/images/'+${webinfo.brandimg}"
                                                                                class="img-circle"
                                                                                style="height: 30px;width: 30px"/> </span>
                    <span th:text="${webinfo.webname}"></span> </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="homepage();">首页</a>
                    </li>
                    <li class="navli"><a class="navbar-link current" href="javascript:void(0);"
                                         onclick="category();">分类</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="archive();">归档</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="whisper();">微语</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="album();">相册</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="me();">关于</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="link();">友链</a></li>
                    <li>
                        <form class="navbar-form" action="artical" method="post">
                            <input type="text" name="keyword" class="form-control" placeholder="请输入关键字（回车搜索）"/>
                        </form>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="music" title="来点音乐"><i class="fa fa-music"></i></a>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="manage" title="后台"><i
                            class="layui-icon layui-icon-website"></i></a></li>
                    <li class="layui-hide-xs"><a href="javascript:void(0);" target="_blank" title="换肤"><i
                            class="layui-icon layui-icon-theme" id="skin"></i></a></li>
                    <th:block th:if="${session.userinfo} != null">
                        <li class=""><a href="javascript:void(0);"><cite th:text="${session.userinfo.nickname}"></cite></a>
                        </li>
                    </th:block>
                    <li class=""><a href="javascript:void(0);" data-pushbar-target="right"><i
                            class="layui-icon layui-icon-more-vertical"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <aside data-pushbar-id="right" class="pushbar from_right">
        <div class="title">
            <span data-pushbar-close="" class="close push_right"></span> Right
        </div>
    </aside>

    <div class="content category-content layui-anim layui-anim-upbit">
        <div class="cont">
            <!--<div class="col-md-3 layui-anim layui-anim-upbit" style="padding: 20px;">
                <div>
                    <h3>Categories</h3>
                </div>
                <div class="category-comment">
                    <div class="category" th:each="categoryInfo:${topicInfos}">
                        <span th:if="${categoryInfo['current'] =='N'}"> <a href="javascript:void(0);" class="left-name-info" th:onclick="'javascript:category('+${categoryInfo['topicId']}+')'" th:text="${categoryInfo['topicName']}"></a> <span th:text="'('+${categoryInfo['topicNum']}+')'"></span> </span>
                        <span th:if="${categoryInfo['current']=='Y'}" class="category-current"> <a th:text="${categoryInfo['topicName']}"></a> <span th:text="'('+${categoryInfo['topicNum']}+')'"></span> </span>
                    </div>
                </div>

            </div>-->

            <div class="col-md-9 col-md-push-2 layui-anim layui-anim-upbit write_bg">
                <div class="category-list">
                    <div class="item-box" th:each="artical : ${articals}">
                        <div class="item">
                            <div class="category-title">
                                <span>
                                    <a href="javascript:void(0);" th:text="${artical['title']}"
                                       th:onclick="'javascript:articalDetail('+${artical['id']}+')'"></a>
                                </span>
                            </div>
                            <p class="text-cont"><a href="javascript:void(0);" th:text="${artical['summary']}"
                                                    th:onclick="'javascript:articalDetail('+${artical['id']}+')'"></a>
                            </p>
                            <div class="op-list">
                                <ul>
                                    <li>
                                        <p class="artical-info">
                                            <!--<i class="blog_avatar"><img th:src="'images/'+${artical['avatar']}" /></i>
                                            <span class="fa fa-user" th:text="' '+${artical['author']}"></span> -->
                                            <span class="fa fa-calendar"><a href="javascript:void(0);"
                                                                            th:text="' '+${artical['createdate']}"
                                                                            th:onclick="archive([[${artical['createdate']}]]);"></a></span>
                                            <span class="fa fa-bookmark"><a href="javascript:void(0);"
                                                                            th:text="' '+${artical['topicName']}"
                                                                            th:onclick="category([[${artical['topicId']}]]);"></a></span>
                                            <th:block th:each="tag : ${artical['tags']}">
                                                <span class="fa fa-tag"><a th:href="'artical?tag='+${tag}"
                                                                           th:text="' '+${tag}"></a></span>
                                            </th:block>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="pageinfo" style="text-align:center"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="container" align="center">
        <div class="endnav">
            <p><b>站点声明：</b></p>
            <p>1、本站个人博客模板，均为本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
            <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱： <a href="/" target="_blank">lihairuizone@sina.com</a></p>
            <p>Copyright &copy; <a href="/" target="_blank">www.lihairuizone.com</a> All Rights Reserved. 备案号：<a
                    href="/" target="_blank">陕ICP备11002373号-1</a></p>
        </div>
    </div>
    <div id="toolBackTop" style="right: 56.375px;">
        <a class="top" href="javascript:void (0);" title="返回顶部" onclick="gotop();return false;"></a>
    </div>
</footer>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var pageCount = [[${pageInfo.total}]];//数量
    var pageNum = [[${pageInfo.pageNum}]];//当前页
    var pageSize = [[${pageInfo.pageSize}]];//每页显示数量
    var topicInfos = [[${topicInfos}]];//分类信息
    /*]]>*/

    layui.config({
        base: '/script/js/util/'
    }).use(['laypage', 'layer'], function () {
        laypage = layui.laypage, layer = layui.layer;
        laypage.render({
            elem: 'pageinfo'
            , count: pageCount             //数据总数
            , limit: pageSize                      //每页显示条数
            , curr: pageNum                        //起始页
            , groups: 5                      //连续页码个数

            //跳转页码时调用
            , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                //do something
                if (!first) {
                    //非首次加载 do something
                    var page = obj.curr;
                    url = "category?pageIndex=" + page;
                    window.location.href = url;
                }
            }
        });
        var content = '<div id="" class="layui-layer-content"><ul class="site-dir layui-layer-wrap" style="display: block;">'
        for (var i = 0; i < topicInfos.length; i++) {
            if (topicInfos[i].current == 'Y') {
                content += '<li><a href="javascript:void(0);" class="category-current" onclick="topic(\'' + topicInfos[i].topicId + '\')"><cite>' + topicInfos[i].topicName + ' (' + topicInfos[i].topicNum + ')</cite></a></li>';
            } else {
                content += '<li><a href="javascript:void(0);" onclick="topic(\'' + topicInfos[i].topicId + '\')"><cite>' + topicInfos[i].topicName + ' (' + topicInfos[i].topicNum + ')</cite></a></li>';
            }
        }
        content += '</ul></div>';
        var winWidth = $(window).width();
        if (winWidth > 1024 && winWidth <= 1366) {
            layer.open({
                title: 'Topics',
                type: 1,
                shade: 0,
                offset: ['25%', '102px'],
                content: content,
            });
        } else if (winWidth > 1366 && winWidth <= 1920) {
            layer.open({
                title: 'Topics',
                type: 1,
                shade: 0,
                offset: ['25%', '286px'],
                content: content,
            });
        }

    })
    //必須放在底部，否則會異常
    var pushbar = new Pushbar({
        blur: true,
        overlay: true,
    });
</script>
</body>
</html>